<!DOCTYPE html>
<%@ taglib prefix="s" uri="/struts-tags"%>
<s:set var="ok" value="%{getText(\"button.ok\")}" />
<s:set var="cancel" value="%{getText(\"button.cancel\")}" />
<s:set var="createSuccessfulMsg"
  value="%{getText('info.create.successful', {getText('title.product.category')})}" />
<s:set var="requiredMsg" value="%{getText('error.required')}" />
<link href="${pageContext.request.contextPath}/css/jquery-ui-combobox.custom.css" rel="stylesheet"
  type="text/css" />
<script type="text/javascript">
  function resetForm() {
    $('#dialog-form :input').val('');
    focusOnFirstElement();
  }

  function focusOnFirstElement() {
<%-- we need to set some delay due to bug (delay in rendering) in IE  --%>
  setTimeout(function() {
      $('#dialog-form :input:visible:enabled:first').focus();
    },10);
  }

  $(function() {
    $('#productCategoryMsg').tooltip({
      tooltipClass : "ui-state-highlight"
    });
    $("#dialog-form")
        .dialog(
            {
              height : 540,
              width : 800,
              modal : true,
              buttons : {
                '<s:property value="#ok" />' : function() {
                  var bValid = $('#product-category-form').valid();
                  if (bValid) {
                    jQuery
                        .ajax({
                          url : '${pageContext.request.contextPath}/inventory/productCategory/createProductCategory.action',
                          type : 'POST',
                          dataType : 'json',
                          cache : false,
                          data : {
                            'productCategory.name' : $('#name').val(),
                            'productCategory.description' : $('#description').val()
                          },
                          success : function(data) {
                            var msg = '';
                            var status = data.status;
                            if (status == 'SUCCESS') {
                              msg = '<s:property value="#createSuccessfulMsg"/>';
<%-- reload parent customer list --%>
  $('#listProductCategory').trigger('reloadGrid');
                              resetForm();
                            } else if (status == 'ERROR') {
                              if (data.errors) {
                                var errors = data.errors;
                                for ( var i = 0; i < errors.length; i++) {
                                  msg += errors[i];
                                  if (i < errors.length - 1) {
                                    msg += ', ';
                                  }
                                }
                              }
                            }
                            $('#productCategoryMsg').attr('title',msg).tooltip('open');
                            setTimeout(function() {
                              $('#productCategoryMsg').tooltip("close").attr("title","");
                            },1500);
                          }
                        });

                  }
                },
                '<s:property value="#cancel" />' : function() {
                  $(this).remove();
                }
              },
              close : function() {
                $(this).remove();
              }
            });
    $("#productCategoryAccordion").multipleaccordion();
    $('#productCategoryAccordion > div > table td.LABEL').css({
      'width' : '95px'
    });
    $('input, select, textarea, button').not(':hidden').each(function(idx) {
      $(this).prop('tabindex',idx + 1);
    });
<%-- need to append form on the fly after rendering dialog otherwise, form will be removed --%>
  $('#dialog-form').wrap('<form id="product-category-form">');
    $.validator.setDefaults({
      errorClass : 'ui-state-error',
      errorPlacement : function(error,element) {
        if (element.context.id.indexOf('_combobox') == -1) {
          error.insertAfter(element.parent().children(':last'));
        } else {
          error.appendTo(element.parent());
        }
      }
    });
    $('#product-category-form').validate(
        {
          rules : {
            'productCategory.name' : {
              required : true
            }
          },
          messages : {
            'productCategory.name' : {
              required : jQuery.format('<s:property value="#requiredMsg" />',
                  '<s:property value="%{getText(\"field.product.category.name\")}" />')
            }
          }
        });
    focusOnFirstElement();
  });
</script>
<div id="dialog-form" title='<s:property value="getText('title.add.product.category')"/>'>
  <div id="productCategoryMsg"></div>
  <div id="productCategoryAccordion">
    <h3>
      <s:property value="getText('title.product.category')" />
    </h3>
    <div>
      <table>
        <tr>
          <td class="LABEL"><label for="name"><s:property
                value="getText('field.product.category.name')" /></label></td>
          <td><input type="text" id="name" name="productCategory.name" maxlength="100"></td>
        </tr>
        <tr>
          <td class="LABEL"><label for="description"><s:property
                value="getText('field.description')" /></label></td>
          <td><textarea cols="30" rows="5" id="description" name="productCategory.description"></textarea></td>
        </tr>
      </table>
    </div>
  </div>
</div>
